<template>
  <div class="header">
    <div class="header_content container">
      <div class="header_content_left">
        <a href="http://www.jcpeixun.com/" class="jc_log" target="_blank"
          ><img src="https://activity.jcpeixun.com/common/img/logo.png"
        /></a>
      </div>
      <nav>
        <ul class="nva_main main">
          <li class="flexcc flexcc">
            <a href="https://activity.jcpeixun.com/2022/0331/">首页</a>
          </li>
        </ul>
      </nav>
      <div class="user_box">
        <div class="go_login_case">
          <a class="register">登录&nbsp;&nbsp;I&nbsp;&nbsp;</a>
          <a class="login">注册</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'nav-header',//加载组件名称
  data() {
    return {
      phoneList: [],
    }
  },
  computed: {
    /*username(){
      return this.$store.state.username;
    },
    cartCount(){
      return this.$store.state.cartCount;
    }*/
    ...mapState(['username', 'cartCount'])
  },
  filters: {
    currency(val) {
      if (!val) return '0.00';
      return '￥' + val.toFixed(2) + '元';
    }
  },
  mounted() {
    let params = this.$route.params;
    if (params && params.from == 'login') {
      this.getCartCount();
    }
  },
  methods: {
    login() {
      this.$router.push('/login');
    },
    getCartCount() {
      this.axios.get('/carts/products/sum').then((res = 0) => {
        this.$store.dispatch('saveCartCount', res);
      })
    },
    logout() {
      this.axios.post('/user/logout').then(() => {
        this.$message.success("退出成功");
        this.$cookie.set('userId', '', { expires: '-1' });
        this.$store.dispatch('saveUserName', '');
        this.$store.dispatch('saveCartCount', '0');
      })
    },
    goToCart() {
      this.$router.push('/cart')
    }
  }
}
</script>

<style lang="scss">
@import "./../assets/scss/base.scss";
@import "./../assets/scss/mixin.scss";
@import "./../assets/scss/config.scss";

.header {
  position: sticky;
  top: 0;
  z-index: 11;
  width: 100%;
  height: 70px;
  background: #ffffff;
  box-shadow: 0px 6px 12px rgb(99 110 155 / 10%);

  .header_content {
    height: 70px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header_content_left {
      .jc_log {
        display: inline-block;

        img {
          height: 32px;
          width: auto;
        }
      }
    }

    nav {
      height: 100%;
      // width: 100%;
      flex: 1;

      ul.nva_main {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        li {
          height: 100%;
          position: relative;
          margin-left: 60px;
          @include flex(center, center);
          a {
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            text-align: CENTER;
            color: #333333;
          }

          a:hover {
            color: #1b84ff;
          }

          a.active {
            color: #1b84ff;
          }
        }

        li.active {
          > a {
            color: #1b84ff;
          }

          p {
            a {
              color: #1b84ff;
            }
          }
        }

        li.active::after {
          content: "";
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          width: 100%;
          height: 4px;
          background: #1b84ff;
        }
      }
    }

    .user_box {
      display: flex;
    }

    .new_bg {
      margin-right: 8px;
      width: 101px;
      height: auto;
    }

    .go_login_case {
      display: flex;
      justify-content: center;
      align-items: center;

      a {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: CENTER;
        display: inline-block;
        color: #666666;
      }
    }

    .new_log {
      margin-right: 8px;
      height: 28px;
    }

    #userName {
      height: 18px;
      line-height: 18px;
      font-size: 18px;
    }
  }
}
</style> >
